<template>
  <div class="lottery-record">
    <div class="tab-wrap">
      <div
        v-for="item of data.tabData"
        :key="item.code"
        class="tab-item font16 hover-pointer"
        :class="data.rootItem.code === item.code ? 'tab-active' : ''"
        @click="tabChange(item)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="lottery-content bg-white p-10">
      <div class="lottery-content-flex font16">
        <div class="left">
          <span>{{ data.rootItem.name }}</span> &nbsp;&nbsp;&nbsp;&nbsp; 第
          <span class="red">{{ data.rootPeriod.period }}</span> 期
        </div>
        <div class="right">
          <span class="red hover-pointer" @click="toPage(data.historyUrl)"
            >历史记录</span
          >
        </div>
      </div>
      <div class="lottery-content-wrap">
        <template v-for="(item, index) of data.rootPeriod.content">
          <div
            class="lottery-item p-5 text-center"
            v-if="index < data.rootPeriod.content.length - 1"
            :class="
              props.blueWaves.includes(item.code - 0 + '')
                ? 'bg-blue'
                : props.redWaves.includes(item.code - 0 + '')
                ? 'bg-red'
                : props.greenWaves.includes(item.code - 0 + '')
                ? 'bg-green'
                : ''
            "
          >
            <div class="white font20 font-bolder">
              {{ item.code }}
            </div>
            <div>
              <span class="bg-white font16 inline-block plr-5">
                {{ item.sign }}
              </span>
            </div>
          </div>
        </template>
        <div class="font30 font-bolder add-icon">+</div>
        <div
          class="lottery-item p-5 text-center"
          :class="
            props.blueWaves.includes(
              data.rootPeriod.content[data.rootPeriod.content.length - 1].code -
                0 +
                ''
            )
              ? 'bg-blue'
              : props.redWaves.includes(
                  data.rootPeriod.content[data.rootPeriod.content.length - 1]
                    .code -
                    0 +
                    ''
                )
              ? 'bg-red'
              : props.greenWaves.includes(
                  data.rootPeriod.content[data.rootPeriod.content.length - 1]
                    .code -
                    0 +
                    ''
                )
              ? 'bg-green'
              : ''
          "
        >
          <div class="white font20 font-bolder">
            {{
              data.rootPeriod.content[data.rootPeriod.content.length - 1].code
            }}
          </div>
          <div>
            <span class="bg-white font16 inline-block plr-5">
              {{
                data.rootPeriod.content[data.rootPeriod.content.length - 1].sign
              }}
            </span>
          </div>
        </div>
      </div>
      <div class="lottery-content-flex font16">
        <div class="left">
          第 <span class="red">{{ data.newPeriod.period }}</span> 期：
          {{ moment(data.newPeriod.time).format("M月DD日") }} &nbsp;&nbsp;
          {{ weekFilters(data.newPeriod.time) }} &nbsp;&nbsp;
          {{ moment(data.newPeriod.time).format("H点mm分") }}
        </div>
        <div class="right">
          <span
            class="button inline-block white plr-5 hover-pointer"
            @click="refresh"
            >刷新</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import moment from "moment";
import { onMounted, reactive, defineProps } from "vue";
import { getApiAdTop } from "@/api/api";
const data = reactive({
  tabData: [
    {
      id: "1",
      name: "澳门六合彩",
      code: "Macao",
    },
    {
      id: "2",
      name: "香港六合彩",
      code: "HongKong",
    },
  ],
  historyUrl: "https://www.baidu.com/",
  rootItem: {
    id: "1",
    name: "澳门六合彩",
    code: "Macao",
  },
  rootPeriod: {
    period: "298",
    time: "2024-10-20 21:30:00",
    content: [
      {
        id: "1",
        code: "31",
        sign: "狗/火",
      },
      {
        id: "2",
        code: "17",
        sign: "鼠/火",
      },
      {
        id: "3",
        code: "03",
        sign: "虎/金",
      },
      {
        id: "4",
        code: "29",
        sign: "鼠/水",
      },
      {
        id: "5",
        code: "18",
        sign: "猪/土",
      },
      {
        id: "6",
        code: "08",
        sign: "鸡/火",
      },
      {
        id: "7",
        code: "44",
        sign: "鸡/木",
      },
    ],
  },
  newPeriod: {
    period: "299",
    time: "2024-10-25 21:30:00",
  },
});
const props = defineProps({
  redWaves: {
    type: Array,
    default: () => [],
  },
  blueWaves: {
    type: Array,
    default: () => [],
  },
  greenWaves: {
    type: Array,
    default: () => [],
  },
});
onMounted(() => {
  getAdTop();
});
const tabChange = (item) => {
  data.rootItem = { ...item };
};
const getAdTop = () => {
  getApiAdTop().then((res) => {
    data.result = res;
  });
};
const toPage = (url) => {
  window.open(url);
};
const weekFilters = (time) => {
  const week = moment(time).day();
  switch (week) {
    case 1:
      return "星期一";
    case 2:
      return "星期二";
    case 3:
      return "星期三";
    case 4:
      return "星期四";
    case 5:
      return "星期五";
    case 6:
      return "星期六";
    case 0:
      return "星期日";
  }
};
const refresh = () => {};
</script>

<style lang="less" scoped>
.tab-wrap {
  display: flex;
  justify-content: space-around;
}
.tab-item {
  padding: 5px;
  flex: 1;
  margin: 10px;
  box-sizing: border-box;
  text-align: center;
  background: #dbdbdb;
  border-radius: 4px;
}
.tab-active {
  background: #ff0000;
  color: white;
}
.lottery-content-flex {
  display: flex;
  justify-content: space-between;
}
.lottery-content-flex .left {
  margin-left: 5px;
}
.lottery-content-flex .right {
  margin-right: 5px;
}
.lottery-content-wrap {
  display: flex;
  justify-content: space-between;
}
.lottery-item {
  margin: 5px;
  box-sizing: border-box;
  border-radius: 4px;
  flex: 1;
}
.add-icon {
  display: flex;
  align-items: center;
}
.lottery-content-flex .right .button {
  border-radius: 4px;
  background: #ff9900;
}
</style>
